<template>
  <div>
    <a-modal
      :visible="showLinshi"
      title="临时学员列表"
      :width="800"
      @cancel="showLinshi=false"
      @ok="handleOk"
    >
      <a-input v-model="keywords" style="width:220px;" placeholder="请输入学员姓名/手机号码">
        <a-tooltip slot="suffix" title="请输入学员姓名/手机号码">
          <a-icon type="search" style="color: rgba(0,0,0,.45)" @click="$refs.table.refresh(true)" />
        </a-tooltip>
      </a-input>
      <a-alert :message="'已选择 '+selectedRowKeys.length+' 项'" type="success" style="margin:10px 0;" />
      <s-table
        ref="table"
        :columns="linshiStudentColumns"
        :data="linshiStudentData"
        class="user_management_table"
        :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :scroll='{y:400}'
      >
        <span slot="name" slot-scope="text,record">
          <span v-if="record.student">{{record.student.name}}</span>
        </span>
        <span slot="phone" slot-scope="text,record">
          <span v-if="record.student">{{record.student.main_phone}}</span>
        </span>
        <span slot="course" slot-scope="text,record">
          <span v-if="record.course">{{record.course.name}}</span>
        </span>
        <span slot="courseTime" slot-scope="text,record">
          <span
            v-if="record.hour_number"
          >{{record.hour_number.allowance}}{{record.hour_number.type=='day'?'天':record.hour_number.type=='hour'?'时':''}}</span>
          <span v-else>--</span>
        </span>
      </s-table>
    </a-modal>
  </div>
</template>
<script>
import { STable } from '@/components'
import { addLinshiStudentList } from '@/api/takeName'
export default {
  components: {
    STable
  },
  name: 'linshiStudentInClass',
  props: ['schedule_Id', 'queryID'],
  data() {
    return {
      keywords: undefined, //搜索
      showLinshi: false,
      linshiStudentColumns: [
        {
          title: '学员姓名',
          dataIndex: 'name',
          width: 100,
          ellipsis: true,
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '手机号',
          dataIndex: 'main_phone',
          ellipsis: true,
          scopedSlots: { customRender: 'phone' }
        },
        {
          title: '消耗课程',
          dataIndex: 'course_name',
          ellipsis: true,
          scopedSlots: { customRender: 'course' }
        },
        {
          title: '剩余时间/到期日期',
          dataIndex: 'surplus_clas_hour',
          ellipsis: true,
          scopedSlots: { customRender: 'courseTime' }
        }
      ],
      linshiStudentData: parameter => {
        if (this.schedule_Id == null) {
          return
        }
        return addLinshiStudentList(
          Object.assign(parameter, {
            schedules_id: this.schedule_Id,
            keywords: this.keywords || undefined
          }),
          this.queryID
        )
          .then(res => {
            return res
          })
          .catch(err => {
            this.$message.error(err.data.message || '获取临时学员列表失败')
          })
      },
      selectedRowKeys: [],
      selectedRows: []
    }
  },
  methods: {
    showModel() {
      this.showLinshi = true
      this.$refs.table.refresh(true)
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    handleOk() {
      if (this.selectedRows.length > 0) {
        let arr = []
        this.selectedRows.forEach(val => {
          arr.push(val.student.id)
        })
        this.showLinshi = false
        this.$emit('reload', arr)
      }
    }
  },
  watch: {
    showLinshi(val) {
      if (val == false) {
        this.keywords = undefined
        this.selectedRowKeys = []
        this.selectedRows = []
      }
    },
    schedule_Id(val) {
      if (val !== null || !val) {
        this.$refs.table.refresh(true)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>